
<template>
    <div ref="container" class="echarts-container" :style="{ width: props.width + 'px', height: '100%' }"></div>
</template>
<script setup lang="ts" name="BarChart">
import { ref, inject, onBeforeUnmount, defineProps } from 'vue';
const props = defineProps({
    width: {
        type: Number,
        default: 0
    },
    height: {
        type: Number,
        default: 0
    },
    id: {
        type: String,
        default: ''
    },
    dataX: {
        type: Array,
        default: ''
    },
    dataY: {
        type: Array,
        default: ''
    },
    fontSize:{
        type: Number,
        default: ''
    }
})
// 获取echart挂载的DOM节点
const container = ref();

// 赋值动态ref到变量
// const setItemRef = (el: any) => {
//     if (el) {
//         container.value = el
//     }
// }
// 定义延时器指针对象，便于组件实例销毁的时候以便清除
const timer = ref();

// 通过 inject 接收Echarts
const Echarts = inject('$echarts');
const getFontSize: any = inject('$getfontSize');



const initEchartsOneFn = () => {
    // echarts初始化
    const myChart = (Echarts as any).init(container.value);

    const option = {
        grid: {
            top: '10%',
            right: '3%',
            left: '15%',
            bottom: '12%'
        },
        xAxis: [{
            type: 'category',
            data: props.dataX,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#FFFF'
                }
            },
            axisLabel: {
                show: true,
                margin: 10,
                color: '#FFFF',
                textStyle: {
                    fontSize: getFontSize(props.fontSize) || getFontSize(16)
                },
            },
        }],
        yAxis: [{
            axisLabel: {
                show: true,
                formatter: '{value}',
                color: '#FFFF',
                textStyle: {
                    fontSize: getFontSize(props.fontSize) || getFontSize(16)
                },
            },
            axisTick: {       
                show: true
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgb(230 230 230 / 10%)'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgb(230 230 230 / 10%)'
                }
            },
            min: 0,
            splitNumber: 10,
            max: 100,
        }],
        series: {
            type: 'bar',
            data: props.dataY,
            // barWidth: getFontSize(props.fontSize*2.1) || getFontSize(40),
            barWidth:'80%',
            // itemStyle: {
            //     normal: {
            //         color: 'rgba(27, 146, 253, 1)'
            //     }
                
            // },
            itemStyle: {

                color: {
                type: 'linear',
                x: 0,  //右
                y: 0,  //下
                x2: 0,  //左
                y2: 1,  //上
                colorStops: [
                    {
                        offset: 0.1,
                        color: '#00fabc' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#36826f' // 100% 处的颜色
                    }
                ]
                },
                barBorderRadius: [getFontSize(5), getFontSize(5), 0, 0],
            },
            label: {
                    show: true,
                    position: "top",
                    distance: 0,
                    color:'#FFFF',
                    fontWeight:'700',
                    fontSize: getFontSize(props.fontSize) || getFontSize(16),
                    // width: getFontSize(120),
                    // height: getFontSize(40),
                    // distance: 1
            }
        }
    };
    myChart.setOption(option);
    // 根据页面大小自动响应图表大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// 判断定时器是否存在
if (timer.value) {
    clearTimeout(timer.value);
}

// 绑定定时器，销毁的时候再次清除
timer.value = setTimeout(() => initEchartsOneFn(), 1000);

// 组件实例销毁前清除延时器对象
onBeforeUnmount(() => {
    if (timer.value) clearTimeout(timer.value);
});
</script>

<style scoped >
.chart {
    margin: 0 auto;
}
</style>


<style >
.chart canvas {
    margin-left: 2%;
}
</style>